<template>
    <div class="my-message">
        <el-tabs v-model="current" @tab-click="handleClick">
            <el-tab-pane label="提醒消息" name="1" />
            <el-tab-pane label="系统公告" name="2" />
        </el-tabs>
        <div class="clear-btn" @click="handleDel()">全部清除</div>
        <div class="msg-box">
            <div class="msg-item f f-ac f-jb" v-for="(i, k) in dataList" :key="k" @click="handleDetail(i)">
                <div class="item-left line-1" v-if="i.status!=2">{{ i.title || "-" }}</div>
                <div class="item-leftc line-1" v-if="i.status==2">{{ i.title || "-" }}</div>
                <div class="item-right">{{ i.createtime || "-" }}</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        messageDel,
        messageRead,
        messageDetail,
        detailList
    } from "@/utils/home/index.js";
    export default {
        data() {
            return {
                current: "1", // 当前选中状态
                dataList: [],
            };
        },
        mounted() {
            this.getList();
        },

        methods: {
            handleDel() {
                this.$confirm("确认删除全部消息吗?", "提示", {
                        confirmButtonText: "确定",
                        cancelButtonText: "取消",
                        type: "warning",
                    })
                    .then(() => {
                        messageDel().then(response => {
                            this.$message.success(response.msg);
                        })
                    })
                    .catch(() => {});
            },

            // 切换状态
            handleClick(v) {
                this.current = v.name;
                this.getList();
            },
            // 获取数据
            getList() {
                let that = this
                detailList({
                    type: that.current
                }).then((response) => {
                    that.dataList = response.data.list
                    console.log(that.dataList, 'that.dataList')
                });
            },
            // 查看详情
            handleDetail(i) {
                this.$router.push({
                    path: "/user/myMessageDetails",
                    query: {
                        id: i.id,
                    },
                });
            },
        },
    };
</script>

<style lang="scss" scoped>
    .my-message {
        width: 100%;
        min-height: 483px;
        border-radius: 10px;
        box-sizing: border-box;
        padding: 20px;
        box-shadow: 0px 3px 10px rgba(217, 217, 217, 0.5);
        position: relative;

        .clear-btn {
            user-select: none;
            width: 108px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 5px;
            background-color: #e5eaf6;
            position: absolute;
            right: 20px;
            top: 20px;
            font-size: 14px;
            color: #193980;

            &:hover {
                cursor: pointer;
                background-color: #eaeff8;
            }

            &:active {
                background-color: #e5eaf6;
            }
        }

        .msg-box {
            .msg-item {
                height: 44px;
                background-color: #fff;
                border-bottom: 1px solid #d9d9d9;
                padding: 0 20px 0 11px;
                box-sizing: border-box;

                &:hover {
                    cursor: pointer;
                    background-color: #fafafa;
                }

                &:active {
                    background-color: #fff;
                }

                .item-left {
                    max-width: 660px;
                    color: #313131;

                    &::before {
                        content: "";
                        display: inline-block;
                        width: 4px;
                        height: 4px;
                        border-radius: 50%;
                        background-color: #f00;
                        margin-right: 5px;
                        vertical-align: middle;
                    }
                }

                .item-leftc {
                    max-width: 660px;
                    color: #313131;
                }

                .item-right {
                    color: #909090;
                    font-size: 14px;
                    width: 140px;
                }
            }
        }
    }

    :deep(.el-tabs__item) {
        color: #909090;
    }

    :deep(.el-tabs__nav .is-active) {
        color: #466ec5;
    }

    :deep(.el-tabs__active-bar) {
        background-color: #466ec5;
    }

    :deep(.el-tabs__nav-wrap::after) {
        display: none;
    }
</style>